<template>
  <el-dialog
    title="批次管理"
    append-to-body
    :close-on-click-modal="false"
    @close="closeDialog()"
    :visible="visible"
    width="1200px"
  >
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item>
        <el-button
          icon="el-icon-search"
          type="primary"
          @click="getDataList()"
          >刷新列表</el-button
        >
        <el-button
          v-if="permissions.qrcode_batch_add"
          icon="el-icon-plus"
          type="primary"
          @click="addOrUpdateHandle()"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    
    <div class="avue-crud">
      <el-table :data="dataList" border v-loading="dataListLoading">
        <el-table-column
          type="index"
          header-align="center"
          :index="indexMethod"
          align="center"
          label="编号"
        >
        </el-table-column>
        <el-table-column
          prop="batchName"
          header-align="center"
          align="center"
          label="批次名称"
        >
        </el-table-column>
        <el-table-column
          prop="createCount"
          header-align="center"
          align="center"
          label="生成数量"
        >
        </el-table-column>

        <el-table-column
            header-align="center"
            align="center"
            label="状态">
            <template slot-scope="scope">
              <el-tag type="warning" v-if="scope.row.status === createQrcodeStatusEnum.processing">生成中</el-tag>
              <el-tag type="success" v-else-if="scope.row.status === createQrcodeStatusEnum.success">生成成功</el-tag>
              <el-tag type="info" v-else>生成失败</el-tag>
            </template>
          </el-table-column>

        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              icon="el-icon-edit"
              @click="addOrUpdateHandle(scope.row.id)"
              >查看生成记录</el-button
            >
            <el-button
              v-if="permissions.qrcode_batch_del"
              type="text"
              size="small"
              icon="el-icon-delete"
              @click="deleteHandle(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="avue-crud__pagination">
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="queryParams.pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        :total="totalPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>

    <!-- 批次管理 -->
    <BatchEditForm
      v-if="visibleBatchEdit"
      ref="batchEditForm"
      @refreshDataList="getDataList"
      :visible.sync="visibleBatchEdit"
    ></BatchEditForm>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import { fetchList, delObj } from "@/api/shop_operate/qrcode/batch";
import BatchEditForm from './batch_edit';
import {createQrcodeStatusEnum} from '@/const/const';

export default {
  props:{
    visible: {
      type: Boolean,
      default: false
    },
  },
  data(){
    return{
      // 生成状态
      createQrcodeStatusEnum,
      dataForm:{},
      queryParams: {
        pageIndex: 1,
        pageSize: 10
      },
      dataListLoading:false,
      dataList:[],
      totalPage: 0,
      visibleBatchEdit:false
    }
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  components:{
    BatchEditForm
  },
  methods:{

    /**
     * 初始化
     */
    init(id){
      this.queryParams.qrcodeId = id
      this.getDataList()
    },

    /**
     * 获取数据列表
     */
     getDataList() {
      this.dataListLoading = true;
      fetchList(
        Object.assign({
          qrcodeId: this.queryParams.qrcodeId,
          current: this.queryParams.pageIndex,
          size: this.queryParams.pageSize
        })
      ).then((response) => {
        this.dataListLoading = false;
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
      });
    },

    /**
     * 每页数
     */
     sizeChangeHandle(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageIndex = 1;
      this.getDataList();
    },

    /**
     * 当前页
     */
    currentChangeHandle(val) {
      this.queryParams.pageIndex = val;
      this.getDataList();
    },

    indexMethod(index) {
      return (
        (this.queryParams.pageIndex - 1) * this.queryParams.pageSize + index + 1
      );
    },

    addOrUpdateHandle(id){
      this.visibleBatchEdit = true
      this.$nextTick(() => {
        this.$refs.batchEditForm.init(this.queryParams.qrcodeId);
      });
    },

    //重置表单
    closeDialog() {
      this.$emit('update:visible', false)
    },

    /**
     * 删除
     */
     deleteHandle(id) {
      this.$confirm("是否删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(id);
        })
        .then((data) => {
          this.$message.success("删除成功");
          if(this.dataList.length <= 1 && this.queryParams.pageIndex > 1){
            this.queryParams.pageIndex--;
          }
          this.getDataList();
        })
        .catch(() => {});
    },
    
  }
}
</script>
